import QtQuick 2.12
import QtGraphicalEffects 1.0

// 横向按钮式步骤条
Item {

    // public ===================================================================================

    property var stepTitle: ["步骤1", "步骤2", "步骤3", "步骤4"]

    // 当前步骤编号
    property int step: 0

    // 单个步骤项大小
    property real itemHeight: 32*dp
    property real itemWidth: 90*dp

    // 步骤间隔样式 (默认右箭头)
    property real gapWidth: 35*dp
    property string gapIcon: "qrc:/picture/rightarrow.png"
    property real gapIconSize: Math.min(gapWidth * 0.5, itemHeight * 0.5)

    property real iconSize: config.fontsize + 4*dp

    // 步骤图标样式
    property string icon_step: "qrc:/picture/internet_0.png"
    property string icon_completed: "qrc:/picture/tick3_b.png"
    property string icon_checked: "qrc:/picture/internet_b.png"

    property bool clickable: true           // 是否可通过点击步骤标题来切换步骤

    // 下一步
    function nextStep(){
        if(step >= stepTitle.length){
            return false
        }
        step ++
        return true
    }
    // 上一步
    function lastStep(){
        if(step <= 0){
            return false
        }
        step --
        return true
    }

    // private ======================================================================================


    height: itemHeight
    width: layout_row.implicitWidth


    Row{
        id: layout_row
        spacing: 0
        Repeater{

            model: stepTitle.length


            Item{
                height: itemHeight
                width: index == stepTitle.length - 1 ? itemWidth : itemWidth + gapWidth

                // 按钮
                Rectangle{
                    id: item
                    property bool isHovered: false
                    property bool isCompleted: index < step
                    property bool isChecked: index == step

                    height: itemHeight;   width: itemWidth
                    border.color: (isHovered || isChecked) ? config.themeColor : "#DDDDDD"
                    radius: Math.min(itemHeight, itemWidth) / 2
                    color: isChecked ? config.getOpacityColor(config.themeColor, 0.1) : "white"

                    // 图标
                    CustomImage{
                        id: image_icon
                        height: iconSize; width: iconSize
                        source: item.isCompleted ? icon_completed : (item.isChecked ? icon_checked : icon_step)
                        anchors.centerIn: parent
                        mipmap: true
                        anchors.horizontalCenterOffset: -text_title.contentWidth/2 - 2*dp
                    }
                    // 文字
                    Text{
                        id: text_title
                        text: stepTitle[index]
                        font.pixelSize: config.fontsize
                        color: item.isChecked ? config.themeColor : "#464646"
                        anchors.centerIn: parent
                        anchors.horizontalCenterOffset: image_icon.width/2 + 2*dp
                    }
                    MouseArea{
                        anchors.fill: parent
                        hoverEnabled: config.hoverEnabled
                        cursorShape: "PointingHandCursor"
                        onEntered: {
                            item.isHovered = config.hoverEnabled
                        }onExited: {
                            item.isHovered = false
                        }
                        onClicked: {
                            if(clickable){
                                step = index
                            }

                        }

                    }
                }
                Item{
                    visible: index < stepTitle.length - 1
                    width: gapWidth; height: itemHeight
                    x: itemWidth
                    CustomImage{
                        width: gapIconSize
                        height: width
                        source: gapIcon
                        anchors.centerIn: parent
                        mipmap: true
                    }
                }

            }

        }
    }


}
